const htmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
const path = require("path");
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
    entry: "./index.js",
    mode: "development",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, `dist`)
    },
    // stats: 'errors-only',
    // stats 只显示错误，不显示打包信息
    module: {
        rules: [
            {

                test: /\.(png|jpe?g|gif)$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.([cm]?ts|tsx)$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: false
                }
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "public/index.html"
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsWebpackPlugin()

    ],
    devtool: "source-map",
    devServer: {
        static: [
            {
                directory: path.join(__dirname, 'images'),
                watch: true,
            }],
        open: true, // 项目启动自动打开浏览器
        port: 8080, // 在 8080 端口起服务,
        hot: true,
        proxy: {
            '/proxy': {
                target: 'http://your_api_server.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/proxy': ''
                }
            }

        },
    },
}
